<template>
  <div class="user-manager-list-wrapper">
    <div class="search-wrapper">
      <Row>
        <Col span="18" class="col-height center-vertical">
          <!-- <div > -->
            <Input
              prefix="ios-contact"
              placeholder="搜索用户ID/姓名"
              style="width: 300px"
            />
            <span class="manager-num">管理总数:24</span>
          <!-- </div> -->
        </Col>
        <Col span="6" class="col-height end">
          <!-- <div> -->
            <Button type="primary">添加管理员</Button>
          <!-- </div> -->
        </Col>
      </Row>
    </div>
    <div class="table-wrapper">
      <!-- 184 - 60(page) - 16(scrollbar)  -->
      <Table :columns="columns1" :height="getScreenHeight - 184 - 60 -16" :data="data1.concat(data1).concat(data1).concat(data1)"></Table>
      <div class="page-wrapper center ">
        <Page :total="100" />
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  name: "UserManagerList",
  data() {
    return {
      tableHeight:document.body.getBoundingClientRect().height,
      columns1: [
        {
          title: "序号",
          key: "name",
        },
        {
          title: "用户ID",
          key: "age",
        },
        {
          title: "真实姓名",
          key: "address",
        },
        {
          title: "身份",
          key: "address",
        },
        {
          title: "最近登录时间",
          key: "address",
        },
        {
          title: "操作",
          key: "address",
        },
      ],
      data1: [
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
          date: "2016-10-03",
        },
        {
          name: "Jim Green",
          age: 24,
          address: "London No. 1 Lake Park",
          date: "2016-10-01",
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
          date: "2016-10-02",
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04",
        },
        {
          name: "Jim Green",
          age: 24,
          address: "London No. 1 Lake Park",
          date: "2016-10-01",
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
          date: "2016-10-02",
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04",
        },
      ],
    };
  },
  computed:{
    ...mapGetters(["getScreenHeight"]),
    setTableHeight(){
      return  this.tableHeight- 184 - 60
    }
  },
 
  watch:{
    tableHeight(newVal){
      console.log(newVal)
    }
  }
};
</script>

<style lang="less" scoped>
@search-wrapper-bg: #f0f0f7;
.center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.center-vertical {
  display: flex;
  align-items: center;
}
.end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.user-manager-list-wrapper {
  position: relative;
  .search-wrapper {
    height: 60px;
    width: 100%;
    padding: 0 20px;
    background: @search-wrapper-bg;
    .col-height{
      height: 60px;
    }
    .manager-num {
      margin-left: 20px;
    }
  }
  .table-wrapper {
    // 200 = 64+ 60 + 60 + 16 (滚动条预设 16px)
    height: ~"calc(100vh - 200px)";
    width: 100%;
    // padding-bottom: 60px;
    overflow-y: auto;
    .page-wrapper{
      position: absolute;
      bottom: 0px;
      left: 0;
      z-index: 999;
      width: 100%;
      background: #fff;
      height: 60px;
    }
  }
}
</style>